<template>
  <div class="navbar">
    <div style="display: flex; align-items: center">
      <div class="right-menu">
        <div class="avatar-container">
          <div class="avatar-wrapper">
            <el-avatar
              shape="circle"
              fit="contain"
              :size="36"
              src="/favicon.ico"
            />
            <span
              :style="{
                color: '#fff',
                lineHeight: '50%',
                display: 'inline-block',
                marginLeft: '8px',
              }"
            >
              <div>
                {{ nickname ? nickname : "name" }}
              </div>
            </span>
          </div>
        </div>
      </div>
      <div class="right-menu right-menu-custom">
        <span>
          <div>身份证号：</div>
          <div>
            {{ adminUserId }}
          </div>
        </span>
      </div>
      <div class="right-menu right-menu-custom">
        <span>
          <div>培训科目专业：</div>
          <div style="display: flex">
            <span>{{ subjct }}</span>
          </div>
        </span>
      </div>
    </div>
    <div
      style="width: 35%; display: flex; align-items: center"
      v-if="usererror ? !usererror : !isdisabled"
    >
      <span style="font-size: 18px; margin-right: 8px">考试时间</span>
      <van-count-down
        :time="time"
        format="mm:ss"
        @change="timeChange"
        ref="time"
        @finish="commit"
      />
    </div>
    <div style="width: 5%">
      <!-- <el-button type="primary" @click="commit" v-if='!isdisabled'>交卷</el-button>
       <el-button type="primary" @click="goback" v-else>退出</el-button> -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Breadcrumb from "@/components/Breadcrumb";
import { getsubjectTitle, getExectSetting } from "@/utils/auth";

export default {
  components: {
    Breadcrumb,
  },
  props: ["isJJ", "isdisabled", "usererror"],
  data() {
    return {
      subjct: getsubjectTitle(),
      time: Number(JSON.parse(getExectSetting()).考试时长.时长) * 60 * 1000,
      NowTime: 0,
    };
  },
  mounted() {},
  computed: {
    ...mapGetters([
      "sidebar",
      "device",
      "adminUserId",
      "nickname",
      "userinfor",
    ]),
    objBloon() {
      return this.sidebar.opened;
    },
  },
  watch: {
    objBloon(val) {
      if (val) {
        document
          .getElementsByTagName("body")[0]
          .style.setProperty("--typeWidth", "1");
      } else {
        document
          .getElementsByTagName("body")[0]
          .style.setProperty("--typeWidth", "2");
      }
    },
  },
  methods: {
    commit() {
      if (this.usererror ? !this.usererror : !this.isdisabled) {
        this.$refs.time.pause();
      }
      this.$emit("commit");
    },
    goback() {
      this.$router.push("/simulation/index");
    },
    commitPage() {
      if (this.usererror ? !this.usererror : !this.isdisabled) {
        this.$refs.time.pause();
      }
      this.$emit("commitPage", this.NowTime);
    },
    timeChange(val) {
      this.NowTime =
        Number(JSON.parse(getExectSetting()).考试时长.时长) * 60 -
        val.hours * 3600 -
        val.minutes * 60 -
        val.seconds;
      this.$emit("NowTime", this.NowTime);
    },
  },
  beforeDestroy() {
    // console.log(this.$router, "1111");
    // if (this.isJJ) {
    //   this.commitPage();
    // }
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/calculation.scss";
.navbar {
  height: 50px;
  overflow: hidden;
  position: fixed;
  width: 100%;
  z-index: 100;
  background: #313743;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  justify-content: space-between;
  color: #fff;
  padding: 0 24px;
  align-items: center;
  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .right-menu {
    height: 100%;
    // line-height: 50px;
    margin-right: 50px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 30px;
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;
      .avatar-wrapper {
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
  .right-menu-custom {
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 14px;
    }
  }
}
::v-deep {
  .van-count-down {
    color: #fff;
    font-size: 24px;
  }
}
</style>
